<template>
    
    <!-- 组件的模板 -->
    <div class="page show-navbar" style="min-height:0">        
        <ul class="mod-tabs">
            <li><a :class="{'current':notConfirmBtn}" href="javascript:;" @click="notConfirmFn">未确认{{notConfirmCount}}</a></li>
            <li><a :class="{'current':confirmBtn}" href="javascript:;" @click="confirmFn">已确认{{confirmCount}}</a></li>
        </ul> 
        <!-- 未确认 -->
        <template v-if="notConfirmList.length || confirmList.length">
            <ul class="user-list" id="confirmID" v-if="notConfirmBtn">
                <li class="com-border-bottom" v-for="item in notConfirmList" :data-id="item.baxian_user_id">
                    <a href="#"  @click="gotoUserInfo(item.baxian_user_id)">
                        <img class="avatar" v-if="item.logo.thumb_url" :src="item.logo.thumb_url" alt=""> 
                        <img class="avatar" v-else src="http://sta.doumistatic.com/src/image/saas/avatar.png" alt=""> 
                        <span class="name">{{item.user_name}}</span>
                    </a>
                    <a class="mod-btn-s-2" href="javascript:;" @click="remind(item.baxian_user_id)">提醒</a>
                </li>
            </ul>  
            <!-- 已确认 -->
            <ul class="user-list" id="notconfirmID" v-if="confirmBtn">
                <li class="com-border-bottom" v-for="item in confirmList" :data-id="item.baxian_user_id">
                    <a href="#" @click="gotoUserInfo(item.baxian_user_id)">
                        <img class="avatar" v-if="item.logo.thumb_url" :src="item.logo.thumb_url" alt=""> 
                        <img class="avatar" v-else src="http://sta.doumistatic.com/src/image/saas/avatar.png" alt=""> 
                        <span class="name">{{item.user_name}}</span>
                        <!-- <span class="time">{{item.submit_time | formatDateTime}}</span>  -->
                    </a>
                </li>
            </ul> 
        </template>
         
    </div>  

    <!-- 空页面 -->
    <div class="page" v-show="empty_not">
        <div class="mod-empty">
            <div class="icon icon_1"></div>
            <p class="tip">暂无未确认内容</p>
        </div>
    </div> 
    <div class="page" v-show="empty">
        <div class="mod-empty">
            <div class="icon icon_1"></div>
            <p class="tip">暂无已确认内容</p>
        </div>
    </div> 
    <div class="page__bd" v-show="showMore_not">
        <div class="weui-loadmore">
           <i class="weui-loading"></i>
           <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>
    <div class="page__bd" v-show="showMore">
        <div class="weui-loadmore">
           <i class="weui-loading"></i>
           <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div> 
        
</template> 

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import * as util from 'js/util.js'
    import commonPage from 'clientApi/commonPage.js'
    import widget from 'gapi/widget.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
     let paremData = []
     let notParemData = []
     let teamId = ''
     let projectId = ''
     let noticeId = ''
     let userId = ''
     let title = ''
     let desc = ''
     let startPage_not= 1
     let offset_not = 20
     let startPage = 1
     let offset = 20
     let canLoadMore_not = 1
     let canLoadMore = 1
     // import Dialog from 'components/Dialog/Dialog'
    /**
     *  组件实例对象
     */
    export default {
        components: {
            // Dialog
        },
        data: function(){
            return{
                showMore_not:false, // 未确认公告 ‘正在加载’ 标示显示  默认不显示  当分页时显示
                showMore:false,    // 已确认公告 , ‘正在加载’ 标示显示  默认不显示  当分页时显示
                empty_not:false,   // 未确认公告 ，空页面展示
                empty:false,       // 已确认公告 ，  空页面展示
                notConfirmBtn:true,   // 未确认公告tab 按钮显示状态
                confirmBtn:false,     // 已确认公告tab 按钮显示状态
                notConfirmList:[],    // 未确认公告列表
                confirmList:[],       // 已确认公告列表
                notConfirmCount:'',  //未确认总数
                confirmCount:''      // 已确认总数
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){ 
                teamId = util.getUrddataString('teamId');
                projectId = util.getUrddataString('projectId');
                noticeId = util.getUrddataString('noticeId');
                title = util.getUrddataString('title');
                desc = util.getUrddataString('desc');
                let _true = util.getUrddataString('true');
                this.empty_not = false
                this.empty = false
                window.allRemind = () => {
                    this.remind()
                }  
                if(_true){
                    this.confirmFn();
                    return
                }
                this.notConfirmFn();    

                
            },
            /*未确认*/
            notConfirmFn (){
                this.empty = false
                this.notConfirmBtn = true
                this.confirmBtn = false
                startPage_not = 1
                commonPage.updateTitleBar({
                    rightDisplay: true,            // 是否显示右按钮
                    rightText: '全部提醒',            // 右按钮文案
                    rightAction: 'allRemind'    // 点击右按钮的文案（即回调函数名称）
                })
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/notice/user/statistics',
                    type:'GET',
                    data:{
                        team_id: teamId,
                        project_id: projectId,
                        notice_id: noticeId,
                        page:startPage_not,
                        page_size:offset_not
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log(obj)
                        commonPage.loadPageStatus('loadSuccess')
                        this.showMore_not = false
                        if(obj&&obj.errno == 0){
                            if(obj.data.not_submited.length){
                                notParemData = ['']
                                notParemData = obj.data.not_submited
                                this.notConfirmList = obj.data.not_submited
                                this.notConfirmCount = obj.data.not_submited_count == 0 ? '' : '(' +obj.data.not_submited_count+')'
                                this.confirmCount = obj.data.submited_count == 0 ? '' : '(' +obj.data.submited_count+')'
                                this.empty_not = false
                                this.empty = false
                            }else{
                                canLoadMore_not = 0 
                                this.empty_not = true
                                this.empty = false
                            }
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            /*已确认*/
            confirmFn (){
                this.empty_not = false
                this.notConfirmBtn = false
                this.confirmBtn = true
                startPage = 1
                // if(util.OS()=='ios'){
                //     commonPage.updateTitleBar({
                //         rightDisplay: true,            // 是否显示右按钮
                //         rightText: '',            // 右按钮文案
                //         rightAction: ''    // 点击右按钮的文案（即回调函数名称）
                //     })
                // }else{
                //     commonPage.updateTitleBar({
                //         rightDisplay: false,            // 是否显示右按钮
                //         rightText: '',            // 右按钮文案
                //         rightAction: ''    // 点击右按钮的文案（即回调函数名称）
                //     })
                // }
                commonPage.updateTitleBar({
                    rightDisplay: false,            // 是否显示右按钮
                    rightText: '',            // 右按钮文案
                    rightAction: ''    // 点击右按钮的文案（即回调函数名称）
                })
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/notice/user/statistics',
                    type:'GET',
                    data:{
                        team_id: teamId,
                        project_id: projectId,
                        notice_id: noticeId,
                        page:startPage,
                        page_size:offset
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log(obj)
                        commonPage.loadPageStatus('loadSuccess')
                        this.showMore = false
                        if(obj&&obj.errno == 0){
                            if(obj.data.submited.length){
                                paremData = ['']
                                paremData = obj.data.submited
                                this.confirmList = obj.data.submited
                                this.confirmCount = obj.data.submited_count == 0 ? '' : '(' +obj.data.submited_count+')'
                                this.notConfirmCount = obj.data.not_submited_count == 0 ? '' : '(' +obj.data.not_submited_count+')'
                                this.empty_not = false
                                this.empty = false
                            }else{
                                canLoadMore = 0
                                this.empty = true
                                this.empty_not = false
                            }
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            /*未确认分页*/
            notConfirmFnMore (){
                // let newList_not = notParemData.slice(startPage_not,offset_not+startPage_not)
                // if(newList_not){
                //     this.showMore_not = false
                //     newList_not.forEach( (item) => {
                //         this.notConfirmList.push(item)
                //     }) 
                // }
                startPage_not ++ 
                this.notReadBtn = true
                this.readBtn = false
                console.log(startPage_not)
                util.ajax({
                    url:'/notice/user/statistics',
                    type:'GET',
                    data:{
                        team_id: teamId,
                        project_id: projectId,
                        notice_id: noticeId,
                        page:startPage_not,
                        page_size:offset_not
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log(obj)
                        this.showMore_not = false
                        if(obj&&obj.errno == 0){
                            obj.data.not_submited.forEach((item)=>{
                                this.notConfirmList.push(item)
                            })
                            if(obj.data.not_submited.length == 0){
                                canLoadMore_not = 0
                            }
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
             /*已确认分页*/
            confirmFnMore (){
                // let newList = paremData.slice(startPage,offset+startPage)
                // if(newList){
                //     this.showMore = false
                //     newList.forEach( (item) => {
                //         this.confirmList.push(item)
                //     }) 
                // }
                this.empty_not = false
                this.notConfirmBtn = false
                this.confirmBtn = true
                startPage ++ 
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/notice/user/statistics',
                    type:'GET',
                    data:{
                        team_id: teamId,
                        project_id: projectId,
                        notice_id: noticeId,
                        page:startPage,
                        page_size:offset
                    },
                    timeout:10000,
                    success:(obj) => {
                        console.log(obj)
                        commonPage.loadPageStatus('loadSuccess')
                        this.showMore = false
                        if(obj&&obj.errno == 0){
                            obj.data.submited.forEach((item)=>{
                                this.confirmList.push(item)
                            })
                            if(obj.data.submited.length == 0){
                                canLoadMore_not = 0
                            }
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
                
            },
            /*设置提醒*/
            remind (id) {
                let userids = [];
                if(id){
                    userids.push(id)
                }else{
                    let _lis = $('#confirmID').find('li');
                    _lis.forEach( (eachLi) => {
                        let dataid = eachLi.getAttribute('data-id')
                        userids.push(dataid)
                    })
                }
                let data = {
                    team_id: teamId,
                    project_id: projectId,
                    notice_id: noticeId,
                    title:title,
                    desc:desc,
                    userIds:"["+userids+"]"
                }
                console.log(data)
                util.ajax({
                    url:'/notice/remind',
                    type:'POST',
                    data:data,
                    timeout:10000,
                    success:(obj) => {
                        // console.log(JSON.stringify(obj))
                        if(obj){
                            if(obj.errno == 0){
                                widget.toast('提醒成功')
                                this.item.submit_time = 0;
                            }else{
                                widget.toast(obj.errmsg)
                            }
                            
                        }else{
                            widget.toast(obj.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => { 
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            /*跳转到个人信息*/
            gotoUserInfo (user_id){
                let str = `tid=${teamId}&pid=${projectId}&uid=${user_id}`
                let encodeStr = encodeURIComponent(str)
                location.href = `dmsaas://ProjectMemberDetail?urdData=${encodeStr}`
            },
        },
        filters: {
            formatDateTime(date){
                return util.formatDate(date);
            }
        },
        created(){ 
            this.init();
            // 未读分页
            commonPage.registerHitPageBottomListener(() => {
                if(this.notConfirmBtn){
                    
                    if(canLoadMore_not==0){
                        return
                    }else{
                        canLoadMore_not = 1
                        this.showMore_not = true
                        this.notConfirmFnMore()
                        return
                    }
                    
                }else if(this.confirmBtn){
                    if(canLoadMore==0){
                        return
                    }else{
                        canLoadMore = 1
                        this.showMore = true
                        this.confirmFnMore()
                        return
                    }
                    
                }
                
            }, 0)
        }
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/notice.css"></style>
<style>
    .mod-tabs{
        position: fixed;
       
    }
</style>



